<template>
  <div class="set-tranfer-number">
    <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
      <a-form-item label="运单号" name="waybillNum" :rules="[{ required: false, message: '请输入运单号', trigger: 'change' }]">
        <a-input disabled v-model:value="formState.waybillNum" />
      </a-form-item>

      <a-form-item label="快递公司" name="fastMail" :rules="[{ required: true, message: '请选择快递公司!' }]">
        <a-select v-model:value="formState.fastMail" placeholder="请选择">
          <a-select-option v-for="item in dataDict['EXPRESS_COMPANY']" :key="item.consValue" :value="item.code" :label="item.name">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="转单号" name="transferNo" :rules="[{ required: true, message: '请输入转单号', trigger: 'change' }]">
        <a-input v-model:value="formState.transferNo" />
      </a-form-item>
    </a-form>

    <div class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" @click="onSubmit">保 存</a-button>
      <a-button @click="resetForm">取 消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: DepartmentPersonnel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "sumbit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData } = toRefs(props);
const { dataDict } = CommonHook();
const { tableData, formState, loading, formRef } = InitHook();
const { onSubmit, resetForm } = OperationHook({
  visible,
  passData,
  tableData,
  formState,
  loading,
  formRef,
  emit
});

//获取数据
const getData = () => {
  console.log(passData.value);
  formState.fastMail = passData.value.courierCompanies;
  formState.transferNo = passData.value.transferOrderNumber;
  formState.waybillNum = passData.value.waybillNum;
};

watch(
  () => visible.value,
  v => {
    if (v) {
      getData();
    } else {
      resetForm();
    }
  }
);

// init();
getData();
</script>
<style lang="stylus" scoped>
.set-tranfer-number{
    background-color: #fff;

    .operation-btn-wrapper{
        :deep(.ant-btn){
            margin-right: 16px;
        }
        display:flex;
        justify-content:flex-end;
        margin-top:20px
    }
}
</style>
